<template>
	<view class="pages">
		<div class="serachBox">
			<u-search :placeholder="$t('Policies.searchtips')" v-model="protect_user" :showAction="false" bgColor="#fff"
				@search="searchContent" @custom="searcClickhContent" @clear="clearCibtent"></u-search>
		</div>
		<view class="settings">
		
			<view class="settingsItems" @click="Inforceshow = true">
				<span>{{inforce ? inforce : 'Inforce'}}</span>
				<view class="icon">
					<u-icon name="arrow-down" v-if="Inforceshow == false"></u-icon>
					<u-icon name="arrow-up" v-else></u-icon>
				</view>
			</view>   


			<view class="settingsItems" @click="Pendingshow = true">
				<span>{{pending ? pending : 'Pending'}}</span>
				<view class="icon">
					<u-icon name="arrow-down" v-if="Pendingshow == false"></u-icon>
					<u-icon name="arrow-up" v-else></u-icon>
				</view>
			</view>

		</view>
		<view class="settingsItems addItemsStyle" @click="$next('/pages/Policies/AddNewPolicy')">
			<span style="font-size: 40rpx;margin-right: 5rpx;">+</span>
			<span>{{$t('Policies.SubmitNewPolicy')}}</span>
		</view>
		<!-- Inforce选择器 -->
		<u-picker :show="Inforceshow" :columns="inforcecolumns" keyName="label" @confirm="Inforceconfirm"
			@cancel="Inforceshow = false" :confirmText="$t('Confirm')" :cancelText="$t('Cancel')"></u-picker>
		<!-- Pending选择器 -->
		<u-picker :show="Pendingshow" :columns="Pendingcolumns" keyName="label" @confirm="Pendingconfirm"
			@cancel="Pendingshow = false" :confirmText="$t('Confirm')" :cancelText="$t('Cancel')"></u-picker>
		<view class="selectBoxl" >
			<view class="selectBoxItemsl" @click.stop="startTimeshow = true">
				<image src="../../../static/date.png" mode="" style="width: 40rpx;height: 40rpx;margin-right: 15rpx;">
				</image>
				<view class="tips">

					{{startTime ? startTime : this.$t('SelectstartTime')}}
					<image v-if="startTime" src="../../../static/qingchu.png" mode=""
						style="width: 30rpx;height: 30rpx;margin-left: 15rpx;" @click.stop="clearDate('startTime')">
					</image>
				</view>
				<u-icon name="arrow-down" v-if="startTimeshow == false"></u-icon>
				<u-icon name="arrow-up" v-else></u-icon>
			</view>


			<view class="selectBoxItemsl" @click.stop="endTimeshow = true">
				<image src="../../../static/date.png" mode="" style="width: 40rpx;height: 40rpx;margin-right: 15rpx;">
				</image>
				<view class="tips">

					{{endTime ? endTime : this.$t('SelectendTime')}}
					<image v-if="endTime" src="../../../static/qingchu.png" mode=""
						style="width: 30rpx;height: 30rpx;margin-left: 15rpx;" @click.stop="clearDate('endTime')">
					</image>
				</view>
				<u-icon name="arrow-down" v-if="endTimeshow == false"></u-icon>
				<u-icon name="arrow-up" v-else></u-icon>
			</view>

		</view>
		<!-- 选择开始时间 -->
		<u-datetime-picker :show="startTimeshow" v-model="date" :minDate="1640995200000" :maxDate="maxDate" @confirm="startTimeconfirm"
			mode="date"  @cancel="startTimeshow = false"
			:formatter="startTimeformatter" :confirmText="$t('Confirm')"
			:cancelText="$t('Cancel')"></u-datetime-picker>
		<!-- 选择结束时间 -->
		<u-datetime-picker :show="endTimeshow" v-model="date" :minDate="1640995200000" :maxDate="maxDate" @confirm="endTimeshowconfirm"
			mode="date"  @cancel="endTimeshow = false"
			:formatter="startTimeformatter" :confirmText="$t('Confirm')"
			:cancelText="$t('Cancel')"></u-datetime-picker>
		<mescroll-uni @init="mescrollInit" :top="440" @down="downCallback" :up="upOption" @up="upCallback">
			<view class="items" v-for="(items,index) in dadaList"
				@click="$next('/pages/Policies/PoliciesDtalis',items)">
				<view class="itemsLeft">
					<image src="../../../static/orderlist.png" mode="" style="width: 120rpx;height:120rpx;">
				</view>
				<view class="itemsCenter">
					<view class="itemsCenterT">
						{{ items.protect_user || ''}}
					</view>
					<view class="itemsCenterB">
						{{items.create_id || ''}}
					</view>
					<view class="itemsCenterB">
						{{items.created_at | formatter('yyyy-mm-dd')}}
					</view>
				</view>
				<view class="itemsRight" :class="[ items.stu_name == 'Submitted' ? 'submitted' : '']">
					{{stuats(items.stu_name)}}
				</view>   
				<image src="../../../static/you.png" mode="" style="width: 50rpx;height:50rpx;">
			</view>
		</mescroll-uni>  

	</view>
</template>
  
<script>
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	export default {
		mixins: [MescrollMixin],
		data() {
			return {
				date: '',
				maxDate:'',
				newUrl: 1, //0为新接口1为老接口
				dadaList: [],
				startTime: '',
				endTime: '',
				protect_user: '',
				order_number: '',
				pending: '',
				inforce: '',
				member: '',
				Inforceshow: false,
				Pendingshow: false,
				startTimeshow: false,
				endTimeshow: false,
				inforcecolumns: [
					[{
						label: 'Active',
						id: 0
					}, {
						label: 'Completed',
						id: 1
					}, {
						label: 'All',
						id: 2
					}]
				],
				Pendingcolumns: [
					[{
						label: 'Submitted',
						id: 0
					}, {
						label: 'Reviewed',
						id: 1
					}, {
						label: 'All',
						id: 2
					}]
				],
				upOption: {
					noMoreSize: 10, //如果列表已无数据,可设置列表的总数量要大于半页才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看; 默认10,
				},
				// downOption: {
				// 	use: true, // 是否启用下拉刷新; 默认true
				// 	auto: true, // 是否在初始化完毕之后自动执行下拉刷新的回调; 默认true
				// },
				top: "24rpx",
				pager: {
					currentPage: 1,
					maxResultCount: 10
				},
			}
		},
		onShow() {

			this.getList()
		},
		watch: {
			searchContent: {
				immediate: false,
				handler(newValue, oldValue) {
					this.getList()
				}
			}
		},
		methods: {
			upCallback(page) {
				this.pager.currentPage = page.num; //在第几页
				this.pager.maxResultCount = page.size; //展示多少条数据
				this.getList()
			},
			downCallback(page) { // 下拉刷新
				this.mescroll.resetUpScroll();
			},

			// 获取数据
			async getList() {
				uni.showLoading({
					title: this.$t('Laoding'),
				})
				const date = new Date();
				this.maxDate = date.getTime(); 
				const res = await this.$get(`/backend/order/list`, {
					page: this.pager.currentPage,
					perPage: this.pager.maxResultCount,
					startTime: this.startTime,
					endTime: this.endTime,
					protect_user: this.protect_user,
					member: this.member,
					order_number: this.order_number,
					pending: this.pending,
					inforce: this.inforce
				}, this.newUrl)
				console.log(res, 'res');
				if (res.data.data.total >= 0) {
					if (this.pager.currentPage == 1) {
						this.dadaList = []
					}
					this.dadaList = this.dadaList.concat(res.data.data.list)
				}
				this.mescroll.endBySize(res.data.data.list.length, res.data.data.total)
			},
			// 选择Inforce
			Inforceconfirm(e) {
				if (e.value[0].label == 'All') {
					this.inforce = ''
				} else {
					this.inforce = e.value[0].label
				}
				this.Inforceshow = false
				this.getList()
			},

			// 选择Pending
			Pendingconfirm(e) {
				if (e.value[0].label == 'All') {
					this.pending = ''
				} else {
					this.pending = e.value[0].label
				}
				this.Pendingshow = false
				this.getList()
			},
			startTimeformatter(type, value) {
				if (type === 'year') {
					return `${value}`
				}
				if (type === 'month') {
					return `${value}`
				}
				if (type === 'day') {
					return `${value}`
				}
				return value
			},
			// 选择开始时间
			startTimeconfirm(e) {
				let date = new Date(e.value)
				let year = date.getFullYear().toString().padStart(2, '0')
				let month = (date.getMonth() + 1).toString().padStart(2, '0')
				let day = date.getDate().toString().padStart(2, '0')
				this.startTime = `${year}-${month}-${day}`
				this.startTimeshow = false
				this.getList()
			},
			endTimeshowconfirm(e) {
				let date = new Date(e.value)
				let year = date.getFullYear().toString().padStart(2, '0')
				let month = (date.getMonth() + 1).toString().padStart(2, '0')
				let day = date.getDate().toString().padStart(2, '0')
				this.endTime = `${year}-${month}-${day}`
				this.endTimeshow = false
				this.getList()
			},
			// 回车触发
			searchContent(e) {
				this.protect_user = e
				this.getList()
			},
			// 点击搜索触发
			searcClickhContent(e) {
				this.protect_user = e
				this.getList()
			},
			// 清空内容时触发
			clearCibtent(e) {
				this.protect_user = e
				this.getList()
			},
			// 重置时间
			clearDate(val) {
				if (val == 'startTime') {
					this.startTime = ''
				} else {
					this.endTime = ''
				}
				this.getList()
			},
			stuats(val) {
				let txt = ''
				console.log('submitted', val);
				if (val == 'Submitted') {
					txt = 'Submitted'
				} else if (val == 'Finished') {
					txt = 'Finished'
				} else if (val == 'Active') {
					txt = 'Active'
				} else if (val == 'Reviewed') {
					txt = 'Reviewed'
				}
				return txt
			}

		},

	}
</script>

<style scoped>
	.pages {
		width: 100%;
		height: 100vh;
		overflow-y: auto;
		background-color: #F0F0F0;
		/* padding: 0 10rpx; */
		box-sizing: border-box;

	}

	.settings {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		margin-top: 32rpx;
	}

	.settingsItems {
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 64rpx;
		background-color: #fff;
		line-height: 64rpx;
		font-family: Montserrat;
		font-size: 14px;
		font-weight: 700;
		letter-spacing: 0.20000000298023224px;
		text-align: center;
		color: #273562;
		padding: 0 30rpx;
		width: 49%;
		border-radius: 32rpx;
		margin-bottom: 20rpx;
		box-sizing: border-box;
	}


	.settingsItems:first-child {
		margin-left: 0;
	}

	.settingsItems span {
		box-sizing: border-box;
		margin-right: 10rpx;
	}

	.selectBoxl {
		display: flex;
		align-items: flex-start;
		justify-content: space-between;
		width: 100%;
		height: 64rpx;
		margin-bottom: 20rpx;
	}

	.selectBoxItemsl {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 15rpx;
		box-sizing: border-box;
		width: 330rpx;
		height: 100%;
		background-color: #fff;
		border-radius: 16rpx;
	}

	.tips {
		display: flex;
		align-items: center;
		justify-content: flex-start;
		width: 250rpx;
		font-family: Montserrat;
		font-size: 28rpx;
		font-weight: 400;
		line-height: 10px;
		letter-spacing: 0.20000000298023224px;
		text-align: left;
		color: #808080;
	}

	.items {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding-right: 10rpx;
		width: 700rpx;
		height: 168rpx;
		background-color: #fff;
		/* margin-bottom: 12rpx; */
		margin: 0 auto 12rpx;
		box-sizing: border-box;
		border-left: 16rpx solid #273562;
	}

	.items:last-child {
		/* margin-bottom: 120rpx; */
		/* background-color: #73E11D; */
	}

	.itemsLeft {
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
		/* width: 150rpx;
		height: 150rpx; */
		margin: 0 20rpx 0 10rpx;
	}

	.itemsCenter {
		width: 330rpx;

	}

	.itemsCenterT {
		font-family: Montserrat;
		font-size: 32rpx;
		font-weight: 700;
		letter-spacing: 0.20000000298023224px;
		text-align: left;
	}

	.itemsCenterB {
		font-family: Montserrat;
		font-size: 28rpx;
		font-weight: 400;
		letter-spacing: 0.20000000298023224px;
		text-align: left;
	}
	.itemsCenterB:nth-child(2) {
		margin: 10rpx 0;
	}
	.itemsRight {
		width: 120rpx;
		height: 32rpx;
		line-height: 32rpx;
		border-radius: 16rpx;
		font-family: Inter;
		font-size: 24rpx;
		font-weight: 700;
		text-align: center;
		color: #fff;
		background-color: #73E11D;
		padding: 6rpx 10rpx;
	}

	.RX {
		width: 56rpx;
		height: 56rpx;
		position: absolute;
		right: 5rpx;
		bottom: 5rpx;
		background-color: #fff;
		border-radius: 50%;
	}

	.serachBox {
		width: 100%;
		height: 64rpx;
		margin-top: 26rpx;
	}

	.addItemsStyle {
		display: flex;
		align-items: center;
		background-color: #273562;
		color: #fff;
		width: 54%;
	}

	.submitted {
		background-color: #273562;
	}

	.orderTypeStyle {
		background-color: #273562;
		color: #F0F0F0;
	}
</style>